import React, { useEffect, useState } from 'react'
import {
  PageHeader, Button, Modal, Form, Input, message,
  Row,
  Col,
  Upload,
  Select,
  Tag,
  Tabs
} from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
const { CheckableTag } = Tag;
const { TabPane } = Tabs;
const tagsData = ['内科', '外科', '精神科2', '超长可可可可可可可可儿科咳咳咳3', '外科4', '精神科5', '外科6', '精神科7', '超长可可可可可可可可儿科咳咳咳'];

const { Option } = Select;
export default function Edit() {

  const [loading, setloading] = useState(false)
  const [imageUrl, setimageUrl] = useState('')
  const [selectedTags, setSelectedTags] = useState([])
  const callback = (key) => {
    console.log(key);
  }
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
    vertical: ""
  };
  /* eslint-disable no-template-curly-in-string */

  const validateMessages = {
    required: '${label} is required!',
    types: {
      email: '${label} is not a valid email!',
      number: '${label} is not a valid number!',
    },
    number: {
      range: '${label} must be between ${min} and ${max}',
    },
  };
  /* eslint-enable no-template-curly-in-string */

  const handleChangeTag = (tag, checked) => {

    const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    setSelectedTags(nextSelectedTags)
  }

  const onFinish = (values) => {
    console.log(values);
  };
  const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }

  const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  }
  const handleChange = info => {
    if (info.file.status === 'uploading') {
      setloading(true)
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl => {
        setloading(false)
        setimageUrl(imageUrl)
      }
      );
    }
  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );
  return (
    <div style={{ "padding": "20px" }}>
      <Tabs defaultActiveKey="1" onChange={callback}>
        <TabPane tab="スタッフ詳細 " key="1">
          <div className='header-user-name'>
            <Row>
              <Col span={3} push={21}>
                <div className='user-name-box'>
                  <span> 大川 智之</span>

                  <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.avpyIg0p8EXBUheqaydYCAAAAA?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="头像" />
                </div>

              </Col>
            </Row>
          </div>
          <div className='observe-list-box'>
            <div className='observe-title'>
              <span className='list-title-test'>スタッフ-覧 </span>

            </div>
            <div className='edit-user-box'>
              <Form layout="vertical" name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
                <Row>
                  <Col span={8}>
                    <div className='edit-user-form1'>
                      <Form.Item
                        name={['user', 'name']}
                        label="名前"
                        rules={[
                          {
                            required: true,
                            message: '入力してください'
                          },
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item name={['user', 'website']} label="フリガナ"
                        rules={[
                          {
                            required: true,
                            message: '入力してください'
                          },
                        ]}>
                        <Input />
                      </Form.Item>
                      <Form.Item
                        name={['user', 'name']}
                        label="権限"


                      >
                        <Select
                          placeholder="Select a option and change input text above"
                          defaultValue="lucy"
                          disabled
                          allowClear
                        >
                          {/* <Option value="male">male</Option>
                          <Option value="female">female</Option>
                          <Option value="other">other</Option> */}
                        </Select>
                      </Form.Item>
                      <Form.Item name={['user', 'website']} label="診療科(複数選択可)">
                        <div>
                          {tagsData.map(tag => (
                            <CheckableTag
                              className={selectedTags.indexOf(tag) > -1 ? "header-tag-checked" : 'header-tag'}
                              key={tag}
                              checked={selectedTags.indexOf(tag) > -1}
                              onChange={checked => handleChangeTag(tag, checked)}
                            >
                              {tag}
                            </CheckableTag>
                          ))}

                        </div>
                      </Form.Item>
                    </div>
                  </Col>
                  <Col span={8}>
                    <div className='edit-user-form1'>
                      <Form.Item
                        name={['user', 'name']}
                        label="電話番号"

                      >
                        <Input />
                      </Form.Item>
                      <Form.Item name={['user', 'website']} label="メ-ルアドレス(ログインID)"
                        rules={[
                          {
                            required: true,
                            message: '正しいメ-ルアドレスを入力してください'
                          },
                        ]}>

                        <Input />
                      </Form.Item>

                      <Form.Item name={['user', 'website']} label="ログインパスク-ド"
                        rules={[
                          {
                            required: true,
                            message: '苏大文字·黄小文字·数字充子れチれ-つ以上含れ。8~16文字で入カしてくださし半角英数字·半角纪号(ドット、ハイフン、アンダ-バ-、アットマ-ク)を使用してくだ'
                          },
                        ]}>
                        <Input />
                      </Form.Item>
                      <Form.Item
                        name={['user', 'name']}
                        label="さいバスク-ド確隐"
                        rules={[
                          {
                            required: true,
                            message: 'パスク-ドか-政しません'
                          },
                        ]}
                      >
                        <Input />
                      </Form.Item>
                    </div>
                  </Col>
                  <Col span={5}>
                    <Upload
                      name="avatar"
                      listType="picture-card"
                      className="avatar-uploader avatar-uploader-userinfo"
                      showUploadList={false}
                      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                      beforeUpload={beforeUpload}
                      onChange={handleChange}
                    >
                      {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>
                  </Col>
                  <Col span={3}>
                    <Form.Item>
                      <Button type="primary" htmlType="submit" style={{ marginTop: '40px' }}>
                        保存
                      </Button>
                    </Form.Item>
                  </Col>
                </Row>

              </Form>

            </div>


          </div>

        </TabPane>

      </Tabs>
    </div>
  )
}
